<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: #fff;
				height: 0;
			}
			
			.asset.mui-table-view.mui-grid-view .mui-table-view-cell p {
				text-align: left;
			}
			
			.asset.mui-table-view.mui-grid-view .mui-table-view-cell span {
				font-size: 20px;
			}
			
			#slider {
				height: 180px;
			}
			
			.loopRool{height:20px;line-height:20px;overflow:hidden;}
			.loopRool-item{list-style-type:none;margin:0;padding:0;margin-left:6px;}
			/*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/
			.loopRool-item a{line-height:16px; color: inherit;}
						
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border-width: 0;
				padding: 10px;
			}
			#notice{
				position: relative;
			}
			.icon-notice1{
				position: absolute;
				left:15px;
				top:12px;
			}
			
			.mui-table-view-cell:after{
				background-color: inherit;
			}
			.notice{
				padding:10px 10px 10px 30px;
			}
			.mui-grid-9 .icon{font-size: 40px;}
			.mui-grid-9 .mui-h4{line-height: 1.5em;}
			
			.ccard {position: relative;}
			.ccard-bank{}
			.ccard-bank .icon{font-size: 1.8em;}
			.ccard-btn{padding: 10px 0;}
			.ccard-btn .mui-h3{font-size: 1.2em;color:#F14E11}
			.ccard-btn .mui-btn{font-size: 0.8em; padding: 5px 10px;border-radius: 20px;background: #fff;color: #F14E11;}
			.ccard-date{color: #999 !important;font-size: 0.9em;}
			.ccard-bg{position: absolute;right: -20px;top: -20px;font-size: 9em;z-index: 0;opacity: .04;}
			.ccard-add{color:#999;font-size: 1.1em;color: #F14E11;}
		</style>
	</head>

	<body>
		<div style="padding: 0 10px; background: #fff;">
		<div id="slider" class="mui-slider" style="border-radius: 5px;">
			<div id="banner" class="mui-slider-group mui-slider-loop">
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/banner.jpg">
					</a>
				</div>
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="images/banner.jpg">
					</a>
				</div>
			</div>
			<div id="bannerIndicator" class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
			</div>
		</div>
		</div>
		<div class="mui-content">
			<ul id="shortcut" class="mui-table-view mui-grid-view mui-grid-9 margin-top-no border-no">
				<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="faq.html">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-8 mui-text-left text-middle">
							<div class="mui-h4">新手指南</div>
							<p class="font-12">带着新人一起赚钱</p>
						</div>
						<div class="mui-table-cell mui-col-xs-4 text-middle">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-guide1"></use>
							</svg>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="news.html">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-8 mui-text-left text-middle">
							<div class="mui-h4">赚钱攻略</div>
							<p class="font-12">邀请好友 收益多多</p>
						</div>
						<div class="mui-table-cell mui-col-xs-4 text-middle">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-bowl"></use>
							</svg>
						</div>
					</div>
				</li>
			</ul>

			<ul id="notice" class="mui-table-view mui-panel">				
				<li class="mui-table-view-cell notice">
					<span class="mui-icon iconfont icon-notice1"></span>
					<div class="loopRool">
						<div id="loopRool" class="mui-ellipsis mui-text-left">
							<div class="loopRool-item mui-ellipsis" v-for="item in list" :data-id="item.ID" v-text="item.Title"></div>
						</div>
					</div>
				</li>
			</ul> 
			<ul id="listCC" class="mui-table-view mui-panel">
				<li class="mui-table-view-cell mui-h4 mui-text-center" style="padding-top: 30px;" v-if="!list || list.length == 0">
					<h3 style="font-weight: bold;">高效管卡 永不逾期</h3>
					<p class="pt-5"><span class="mui-icon iconfont icon-shandian color-green"></span>10%循环还款 卡奴瞬间变卡神</p>
					<div style="padding: 30px 0;" class="mui-text-center">
						<a class="mui-btn mui-btn-block mui-btn-danger mui-btn-round" @tap="addBankCard()" style="width: 240px; margin: auto;">
							<span class="mui-icon iconfont icon-add"></span> 添加信用卡</a>
					</div>
				</li> 
				<template v-for="(item,index) in list" v-if="item.Type==resources.BankCardType.CreditCard">
				<div v-if="index!=0" class="pt-10" style="background-color: #F2F2F2;"></div>
				<li class="mui-table-view-cell ccard open-window" @tap="openItem(item)">
					<div class="ccard-bank">
						<svg class="icon text-middle" aria-hidden="true">
							<use :xlink:href="'#icon-' + item.BankCode"></use>
						</svg>
						<span class="text-middle">{{item.BankName}} {{item.CardNo.substr(item.CardNo.length-4)}}</span>
					</div>
					<div class="mui-grid-view mui-table ccard-btn">
						<div class="mui-table-cell mui-col-xs-6 mui-h3 text-middle">
							10天内还款
						</div>
						<div class="mui-table-cell mui-col-xs-6 mui-text-right text-middle">
							<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">立即还款</button>
						</div>
					</div>
					<div class="mui-grid-view mui-table ccard-date">
						<div class="mui-table-cell mui-col-xs-4">
							账单日 {{item.BillingDate}}
						</div>
						<div class="mui-table-cell mui-col-xs-6">
							还款日 {{item.RepaymentDate}}
						</div>
					</div>
					<div class="ccard-bg">
						<svg class="icon text-middle" aria-hidden="true">
							<use :xlink:href="'#icon-' + item.BankCode"></use>
						</svg>
					</div>
				</li>
				</template>
				<template v-if="list && list.length > 0">
					<div class="pt-10" style="background-color: #F2F2F2;"></div>
					<li class="mui-table-view-cell ccard-add mui-text-center" @tap="addBankCard()">
						<span class="mui-icon iconfont icon-add"></span> <span>添加信用卡</span>
					</li>
				</template>
			</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/loopRoll.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();

			var $banner = document.getElementById("banner");
			var $loopRool = document.getElementById("loopRool");
			var $wvMessage, $wvGetcash;

			var $slider = mui("#slider");
			$slider.slider({
				interval: 5000
			});
			
			mui("#loopRool").on('tap', 'div', function() {
				var id = this.getAttribute('data-id');
				$wvMessage.evalJS("show("+ id +")");
				$wvMessage.show();
			});
			
			mui("#slider").on('tap', '.mui-slider-item', function() {
				var id = this.getAttribute('data-id');
				$wvMessage.evalJS("show("+ id +")");
				$wvMessage.show();
			});
			
			buildNotice = function () {
				var data = [
					{"ID":"1","Title":"恭喜用户 135****1235 成功循环还款10000元"},
					{"ID":"2","Title":"恭喜用户 189****8585 成功循环还款8500元"},
					{"ID":"3","Title":"恭喜用户 133****4455 成功循环还款15000元"} ];

				var vm = new Vue({
					el: '#loopRool',
					data: {
						list: data
					},
					created: function() {
						window.setTimeout(function() {
							loopRool(20);
						}, 100);
					}
				})
			}
		
			buildBanner = function() {
				var html ='', indicator = '', first, last, item, dataItem;
				app.post("GetHomeBanner", {}, function(data){
					var length = data.data.length;
					for(var i=0; i<length; i++){
						dataItem = data.data[i];
						item = '<div class="mui-slider-item" data-id="' + dataItem.ID +'"><img src="'+ app.server + dataItem.Cover +'" /></div>';
						if(i==0) first = item.replace("mui-slider-item", "mui-slider-item mui-slider-item-duplicate");
						if(i==length-1) last = item.replace("mui-slider-item", "mui-slider-item mui-slider-item-duplicate");
						indicator += '<div class="mui-indicator'+ (i==0 ? " mui-active" : "") +'"></div>';
						html += item;
					}
					html = (length == 1 ? "" : last) + html + first;
					console.log(html);
					
					$banner.innerHTML = html;
					document.getElementById("bannerIndicator").innerHTML = indicator;
					
					$slider.slider({
						interval: 5000
					});					
				}, true);				
			}
			
			var vm;
			buildCCList = function () {					
					vm = new Vue({
						el: '#listCC',
						data: {
							'list': null
						},
						created: function() {
							if(app.isLogin()){
								this.$nextTick(function() {
									this.listAjax();
								});
							}
						},
						computed: {
						},
						methods: {
							listAjax: function() {
								var _self = this;
								app.getBankCardData(function(data) {
									_self.list = data.filter(function (v, i) {
										return v.Type == resources.BankCardType.CreditCard;
									});
									console.log(JSON.stringify(data));
								});
							},
							openItem: function(item) {								
								mui.openWindow({url:"ccard.html", id:"ccard.html",extras:{card:item}});
							},
							addBankCard: function () {
								if(!app.isLogin()) {
									app.openLogin();
									return false;
								}
								mui.openWindow("bankcard-add.html?t=0", "bankcard-add.html");
							}
						}
					});
			}
			
			refresh = function () {
				console.log("home refresh");
				vm.listAjax();
			}
			
			init = function () {
				buildNotice();
				buildBanner();
			}
						
			mui.plusReady(function() { 
				init();	
				
				buildCCList();
				
				setTimeout(function () {
					$wvMessage = mui.preload({
						"id": 'message-item',
						"url": 'message-item.html'
					});
				}, 50);
				
				setTimeout(function () {
					$wvGetcash = plus.webview.getWebviewById("getcash.html");
				}, 100)
			});
			

		</script>
	</body>

</html>